<template>
	<view v-show="mainShow" class="main" id="windowHeight">
		<j-tabs :tabs="tabs" @change="tabsChange" :controlIndex="currentIndex"></j-tabs>
		<!-- 本课预习 -->
		<view v-if="currentIndex == 0">
			<view v-if="isExistsData" class="main-container">
				<view class="title" @tap="showComment = false">
					<span class="title-text">{{viewData.title}}</span>
					<span class="author">{{viewData.authorName}}</span>
				</view>
				<view class="view-content" @tap="showComment = false">
					<view v-for="(item, index) in viewData.items" :key="index" class="cards-list">
						<!-- 1：文字 -->
						<view v-if="item.essayItemType == 1" class="card">
							<view class="text">
								<rich-text :nodes="item.text"></rich-text>
							</view>
						</view>
						<!-- 2：图片 -->
						<view v-else-if="item.essayItemType == 2" class="card">
							<image :src="item.imageSrc" mode="widthFix" class="view-image" @tap="previewImg(item.imageSrc)"></image>
							<view class="text">
								<rich-text :nodes="item.text"></rich-text>
							</view>
						</view>
						<!-- 3：音频 -->
						<view v-else-if="item.essayItemType == 3" class="card">
							<imt-audio 
								:src="item.audioSrc" 
								:duration="item.duration" 
								:autoplay="false" 
								:control="false" 
								class="audio-item">
							</imt-audio>
							<view class="text">
								<rich-text :nodes="item.text"></rich-text>
							</view>
						</view>
						<!-- 4: 视频 -->
						<view v-else-if="item.essayItemType == 4" class="card">
							<view class="media-border">
								<video 
								:id="item.videoSrc" 
								:src="item.videoSrc" 
								class="media-item"
								@tap="singlePlay(item.videoSrc)"></video>
							</view>
							<view class="text">
								<rich-text :nodes="item.text"></rich-text>
							</view>
						</view>
					</view>
				</view>
				<!-- 点赞、评论区 -->
				<view class="comments">
					<!-- 折叠栏 -->
					<view class="collaspe">
						<view class="comments-title">评论区</view>
						<view class="options-item" @tap="isShow = !isShow"></view>
						<view v-bind:class="abbreStyle">
							<view class="abbre-item" @tap="star">给他点赞</view>
							<view class="abbre-item" @tap="textComment">文字评论</view>
							<view class="abbre-item" @tap="audioComment">语音评论</view>
						</view>
					</view>
					<!-- 评论区 -->
					<view v-if="starList.length != 0 || commentList.length != 0" class="comments-content" @tap="showComment = false">
						<view v-if="starList.length != 0" class="star-comment">
							<image src="../../static/icon/star.png" class="star-icon"></image>
							<view v-for="(item, index) in starList" :key="index" class="star-user">
								{{item}}
							</view>
						</view>
						<view v-if="commentList.length != 0" id="commentList">
							<view v-for="(item, index) in commentList" :key="index" class="content-item">
								<view class="content-title">{{item.user}}</view>
								<view v-if="item.type == 'text'" class="content-text" @longtap="copyComment(item.user, item.text)">
									{{item.text}}
								</view>
								<view v-else-if="item.type == 'audio'" class="content-video">
									<mini-audio :src="item.src" :duration="item.duration" class="video"></mini-audio>
								</view>
								<view class="content-bottom">
									<view class="content-time">{{item.time}}</view>
									<image src="@/static/icon/trash.png" class="content-delete" @tap="deleteComment(item)"></image>
								</view>
							</view>
							<view v-if="showBottom" class="none-info">
								--再找也没有了~~--
							</view>
						</view>
					</view>
				</view>
				<!-- 评论输入框 -->
				<im-chat v-if="showComment" :focus="focusComment" @send-message="sendMessage"></im-chat>
				<!-- 录音组件 -->
				<record-ui v-if="showRecord" @cancel="showRecord = false" @save="saveRecord"></record-ui>
			</view>
			<view v-if="!isExistsData" class="default-container">
				<image src="@/static/icon/empty.png" class="default-image"></image>
				<p>Tips:</p>
				<p>本节课暂时没有线上课后作业</p>
			</view>
			<view class="fixed-mine" :style="{backgroundColor: theme.primary}" @tap="goEditor">修改</view>
		</view>
		<!-- 预习名单 -->
		<view v-if="currentIndex == 1">
			<view class="preview-area">
				<view class="area-title">
					已预习学员 (<span :style="{color:theme.danger}">{{previewList.length || 0}}</span>人)
					<view class="title-bottom" :style="{borderColor: theme.primary}"></view>
				</view>
				<view class="preview-list">
					<view v-for="(item, index) in previewList" :key="index" class="preview-item">{{item.studentName}}</view>
				</view>
			</view>
			<view class="preview-area">
				<view class="area-title">
					未预习学员 (<span :style="{color:theme.danger}">{{unPreviewList.length || 0}}</span>人)
					<view class="title-bottom" :style="{borderColor: theme.primary}"></view>
				</view>
				<view class="preview-list">
					<view v-for="(item, index) in unPreviewList" :key="index" class="preview-item">{{item.studentName}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import upload from '@/util/upload.js'
	import imChat from '@/components/im-chat/im-chat.vue'
	import recordUi from '@/components/record-ui/recordVoice.vue'
	import miniAudio from '@/components/mini-audio/mini-audio.vue'
	import jTabs from '@/components/tui-tabs/j-tabs.vue'
	export default{
		components:{ imChat, recordUi, miniAudio, jTabs },
		data(){
			return{
				theme: this.$theme,
				classId: '',
				timeTableId: '',
				//当前登录用户Id
				hostId: '',
				//文章Id
				essayId: '',
				//文章类别 1: 教师大纲 3: 学生作业
				essayType: '',
				//页面渲染标记
				mainShow: false,
				//是否存在美篇数据,用于每篇拉取失败后显示默认提示信息
				isExistsData: false,
				//页面数据
				viewData: {},
				//评论输入框显示标记
				showComment: false,
				//评论折叠动画样式
				abbreStyle:['abbreviation'],
				//评论折叠控制标记
				isShow: false,
				//点赞用户列表
				starList:[],
				//评论数据列表
				commentList:[],
				//焦点是否点在输入框标记
				focusComment: false,
				//是否显示录音组件
				showRecord: false,
				//底部查无数据显示标记
				showBottom: false,
				//tabs栏配置项目
				tabs:{
					defaultIndex: 0,
					width: '100%',
					height: '6vh',
					list:[
						{selectedIndex: 0, text: '本课预习'},
						{selectedIndex: 1, text: '预习名单'}
					]
				},
				//当前tabs栏选择项目
				currentIndex: 0,
				// 已预习学员
				previewList:[],
				// 未预习学员
				unPreviewList: [],
				// 视频列表
				videoContext: []
			}
		},
		watch:{
			isShow(e){
				if(e){
					this.abbreStyle = ['abbreviation', 'abbreviation-show']
				}else{
					this.abbreStyle = ['abbreviation', 'abbreviation-hide']
				}
			},
			currentIndex(e){
				switch(e){
					// 本课预习
					case 0:
						this.initView(this.essayId)	//文章数据
						this.getCommentsList(this.commentList.length, 20)	//评论数据
						break
					// 预习名单
					case 1:
						this.getPreviewStudentsList().then(resp=>{
							this.previewList = resp.result.previewList
							this.unPreviewList = resp.result.unPreviewList
						})
						break
				}
			}
		},
		computed:{
			getCommentTime:function(){
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				let houer = date.getHours()
				let monute = date.getMinutes()
				return `${year}-${month<10?"0"+month:month}-${day<10?"0"+day:day} ${houer<10?"0"+houer:houer}:${monute<10?"0"+monute:monute}`
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.courseName
			})
			this.classId = e.classId
			this.timeTableId = e.timeTableId
			this.essayId = e.essayId
			this.essayType = e.essayType
			this.user = this.$store.state.user.user
			this.initView(this.essayId)	//文章数据
			this.getCommentsList(this.commentList.length, 20)	//评论数据
		},
		onReachBottom(){
			// 本课预习时,触底分页
			if(this.currentIndex == 0){
				this.getCommentsList(this.commentList.length, 20)
			}
		},
		methods:{
			//拉取预习、未预习名单
			getPreviewStudentsList(){
				return this.$http.request({
					url: 'api/LivePlayer/GetChannelStudentPreviewList',
					method: 'GET',
					showLoading: true,
					allow: true,
					data:{
						ClassId: this.classId,
						TimeTableId: this.timeTableId
					}
				})
			},
			//修改
			goEditor(){
				uni.navigateTo({
					url: `../meipian/meipian?&isEditor=true&essayType=${this.essayType}&id=${this.essayId}&title=修改预习`
				})
			},
			//tabs栏选项变更
			tabsChange(selectedIndex){
				this.currentIndex = selectedIndex
			},
			//删除评论
			deleteComment(e){
				let url = `api/Essay/DeleteEssayComment?Id=${e.id}`
				this.$http.request({
					url: url,
					method: 'DELETE',
					showLoading: true,
					allow: true
				}).then(()=>{
					let index = this.commentList.indexOf(e)
					this.commentList.splice(index, 1)
					uni.showToast({
						icon: 'none',
						title: `已删除评论`,
						duration: 2000
					})
				})
			},
			//复制评论
			copyComment(user, e){
				uni.setClipboardData({
				    data: e,
				    success: function () {
						uni.showToast({
							icon: 'none',
							title: `已复制${user}的评论`,
							duration: 2000
						})
				    }
				})
			},
			//拉取美篇数据
			initView(essayId){
				this.$http.request({
					url: 'api/Essay/GetEssay',
					method: 'GET',
					allow:true,
					data:{
						Id: essayId,
						EssayType: this.essayType
					}
				}).then(resp=>{
					this.viewData = resp.result
					this.viewData.essayStars.map(item=>{
						this.starList.push(item.hostName)
					})
					this.viewData.items.filter(item => item.essayItemType == 4).map((e, index)=>{
						this.videoContext[e.videoSrc] = uni.createVideoContext(e.videoSrc)
					})
					this.mainShow = true
					this.isExistsData = true
				}).catch(err=>{
					this.mainShow = true
					this.isExistsData = false
				})
			},
			//拉取评论分页数据
			getCommentsList(skipCount, maxResultCount){
				let len = this.commentList.length
				this.$http.request({
					url: 'api/Essay/GetEssayComments',
					method: 'GET',
					showLoading: false,
					data:{
						essayId: this.essayId,
						skipCount: skipCount,
						maxResultCount: maxResultCount
					}
				}).then(resp=>{
					let list = this.initCommentsList(resp)
					this.commentList = [...this.commentList, ...list]
					if(len == this.commentList.length){
						this.showBottom = true
					}
				})
			},
			//评论数据初期化
			initCommentsList(list){
				let result = []
				list.map((item, index)=>{
					if(item.content){
						result.push({
							type: "text", 
							user: item.hostName, 
							text: item.content, 
							time: item.creationTimeStr,
							id: item.id,
							hostId: item.hostId
						})
					}else if(item.audioSrc){
						result.push({
							type: "audio", 
							user: item.hostName, 
							src: item.audioSrc, 
							duration: item.duration, 
							time: item.creationTimeStr,
							id: item.id,
							hostId: item.hostId
						})
					}
				})
				return result
			},
			//给你点赞~~
			star(){
				let index = this.starList.indexOf(this.user)
				if(index == -1){
					this.$http.request({
						url: 'api/Essay/CreateEssayStar',
						method: 'PUT',
						showLoading: false,
						data:{
							essayId: this.essayId
						}
					}).then(resp=>{
						this.starList.push(this.user)
					})
				}else{
					uni.showToast({
					    title: '您已经赞过了哦',
						icon: 'none',
					    duration: 2000
					})
				}
				this.isShow = false
			},
			//文字评论
			textComment(){
				this.showComment = true
				this.focusComment = true
				this.isShow = false
			},
			//发送文字评论！
			async sendMessage(e){
				await this.$http.request({
					url: 'api/Essay/CreateEssayComment',
					method: 'PUT',
					showLoading: false,
					data:{
						essayId: this.essayId,
						content: e.content,
						audioSrc: "",
						duration: 0
					}
				}).then(resp=>{
					this.commentList.splice(0,0,{
						type: "text",
						user: this.user, 
						text: resp.content, 
						time: this.getCommentTime
					})
					this.showComment = false
					this.focusComment = false
				})
				this.commentScrollMove()
			},
			//语音评论
			audioComment(){
				this.showRecord = true
				this.isShow = false
			},
			//发送语音评论
			async saveRecord(e){
				await upload.upload(3, [e.voice]).then(resp=>{
					this.$http.request({
						url: 'api/Essay/CreateEssayComment',
						method: 'PUT',
						showLoading: false,
						data:{
							essayId: this.essayId,
							content: "",
							audioSrc: resp[0],
							duration: e.duration
						}
					}).then(resp=>{
						this.commentList.splice(0,0,{
							type: "audio",
							user: this.user, 
							src: resp.audioSrc, 
							duration: resp.duration, 
							time: this.getCommentTime
						})
						this.showRecord = false
					})
				})
				this.commentScrollMove()
			},
			//评论后页面滚动
			commentScrollMove(){
				if(this.commentList.length == 0){
					return
				}
				//总高度
				let window = uni.createSelectorQuery()
				window.select('#windowHeight').boundingClientRect()
				let p1 = new Promise((resolve, reject)=>{
					window.exec(function(res){
						resolve({windowHeight: res[0].height})
					})
				})
				//评论区高度
				let query = uni.createSelectorQuery()
				query.select('#commentList').boundingClientRect()
				let p2 = new Promise((resolve, reject)=>{
					query.exec(function(res){
						resolve({height: res[0].height})
					})
				})
				Promise.all([p1, p2]).then(resp=>{
					let windownHeight = 0
					let currentHeight = 0
					resp.map(item=>{
						if(item.windowHeight){
							windownHeight = item.windowHeight
						}else if(item.height){
							currentHeight = item.height
						}
					})
					let top = windownHeight - currentHeight
					uni.pageScrollTo({scrollTop: top})
				})
			},
			// 图片预览
			previewImg(src){
				let urls = []
				this.viewData.items.filter(item=>item.essayItemType == 2).map(e=>{
					urls.push(e.imageSrc)
				})
				uni.previewImage({
					current: src,
					urls: urls
				})
			},
			// 视频单独播放
			singlePlay(src){
				this.viewData.items.filter(item => item.essayItemType == 4).map((e, index)=>{
					if(e.videoSrc != src){
						this.videoContext[e.videoSrc].stop()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	rich-text{
		font-size: 35rpx;
		letter-spacing: 2rpx;
		text-indent: 70rpx;
		line-height: 80rpx;
	}
	.main{
		width: 100%;
		.fixed-mine{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			top: 100rpx;
			right: 10rpx;
			font-size: 30rpx;
		}
		.main-container{
			.title{
				width: 100%;
				height: 200rpx;
				font-size: 40rpx;
				margin: 30rpx 0 30rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.title-text{
					padding: 10rpx 30rpx 10rpx 30rpx;
				}
				.author{
					font-size: 30rpx;
					color: #434343;
					padding: 20rpx;
				}
			}
			.view-content{
				padding: 10rpx 0 10rpx 0;
				border-bottom: 1rpx solid #e7e7e7;
				.cards-list{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-direction: column;
					.card{
						display: flex;
						justify-content: center;
						align-items: flex-start;
						flex-direction: column;
						width: 90vw;
						height: auto;
						margin: 10rpx 0 50rpx 0;
						word-wrap: break-word;
						word-break: break-all;
						overflow-x: hidden;
						.media-border{
							width: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							margin: 30rpx 0 10rpx 0;
						}
						.media-item{
							width: 100vw;
						}
						.view-image{
							width: 90vw;
							margin: 30rpx 0 10rpx 0;
						}
						.audio-item{
							width: 100%;
							margin: 30rpx 0 10rpx 0;
						}
						.text{
							word-wrap: break-word;
							word-break: break-all;
							overflow-x: hidden;
						}
					}
				}
			}
			.comments{
				background-color: #f9f9f9;
				.collaspe{
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;
					.comments-title{
						color: #434343;
						font-size: 30rpx;
						position: relative;
						left: 30rpx;
					}
					.options-item{
						width: 100rpx;
						height: 40rpx;
						border-radius: 4rpx;
						background-color: #e5e5e5;
						position: absolute;
						right: 30rpx;
					}
					.options-item::before{
						content: "";
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #010d27;
						position: absolute;
						top: 40%;
						left: 35%;
					}
					.options-item::after{
						content: "";
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #010d27;
						position: absolute;
						top: 40%;
						right: 35%;
					}
					
					@keyframes collaspe{
						0%{
							opacity: 0;
							width: 0;
						}
						100%{
							opacity: 1;
							width: 400rpx;
						}
					}
					@keyframes no-collaspe{
						0%{
							opacity: 1;
							width: 400rpx;
						}
						100%{
							opacity: 0;
							width: 0;
						}
					}
					.abbreviation-show{
						animation: .3s collaspe forwards;
					}
					.abbreviation-hide{
						animation: .3s no-collaspe forwards;
					}
					
					.abbreviation{
						opacity: 0;
						width: 0;
						height: 80rpx;
						border-radius: 4rpx;
						background-color: #2f2f2f;
						position: absolute;
						top: 14rpx;
						right: 150rpx;
						padding: 0 10rpx 0 10rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						.abbre-item{
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							width: 30%;
							height: 80%;
							font-size: 25rpx;
							border-radius: 4rpx;
							transition: 0.3s;
							white-space:nowrap;
							overflow: hidden;
						}
						.abbre-item:active{
							background-color: #757575;
						}
					}
					.abbreviation::after{
						content: "";
						width: 20rpx;
						height: 20rpx;
						border-radius: 4rpx;
						background-color: #2f2f2f;
						transform: rotate(45deg);
						position: absolute;
						right: -7rpx;
						top: 28rpx;
					}
				}
				.comments-content{
					width: 100%;
					min-height: 100rpx;
					.star-comment{
						padding: 20rpx 30rpx 20rpx 30rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;
						.star-icon{
							width: 40rpx;
							height: 40rpx;
						}
						.star-user{
							font-size: 30rpx;
							margin: 0 10rpx 0 10rpx;
							color: #1296db;
						}
					}
					.content-item{
						min-height: 100rpx;
						border-bottom: 1rpx solid #e7e7e7;
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						flex-direction: column;
						padding: 20rpx 30rpx 20rpx 30rpx;
						background-color: #fff;
						.content-title{
							font-size: 30rpx;
							color: #6a6a6a;
						}
						.content-text{
							width: 100%;
							word-wrap: break-word;
							word-break: break-all;
							overflow-x: hidden;
							padding: 30rpx 5rpx;
							transition: .3s;
						}
						.content-text:active{
							background-color: #cacaca;
						}
						.content-video{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							padding: 30rpx 0 30rpx 0;
							.video{
								margin: 0 10rpx 0 10rpx;
							}
						}
						.content-bottom{
							width: 100%;
							height: 50rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							.content-time{
								font-size: 28rpx;
								color: #6a6a6a;
							}
							.content-delete{
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
					.none-info{
						width: 100vw;
						height: 10vh;
						display: flex;
						justify-content: center;
						align-items: center;
						box-shadow: inset 0 5rpx 10rpx #f0f0f0;
						color: #747474;
						font-size: 28rpx;
					}
				}
			}
		}
		.default-container{
			position: absolute;
			top: 10vh;
			width: 100vw;
			height: 70vh;
			font-size: 30rpx;
			color: #818181;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.default-image{
				width: 120rpx;
				height: 150rpx;
			}
		}
		
		.preview-area{
			margin-top: 20rpx;
			.area-title{
				padding: 10rpx;
				font-size: 30rpx;
				font-weight: 600;
				border-bottom: 1rpx solid #e2e2e2;
				margin: 0 20rpx;
				position: relative;
				.title-bottom{
					content: "";
					width: 180rpx;
					height: 0;
					border-bottom: 4rpx solid #fff;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
			.preview-list{
				width: 100%;
				min-height: 6vh;
				padding: 10rpx;
				margin-top: 10rpx;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				.preview-item{
					width: 30%;
					height: 60rpx;
					box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 10rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
